<template>
	<view class="content">
		<uni-search-bar @confirm="searchCityBus" v-model="searchKey" />
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in lunboList">
				<view class="swiper-item">
					<image :src="item.url" mode="" style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="weather" style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;
				">
		<view class="icon" style="width: 100rpx;height: 100rpx; ">
			<image style="width: 100%;height: 100%;" :src="'/static/icons/'+ weatherNow.icon +'.svg'" mode=""></image>
		</view>
		<view class="text" style="font-size: 50rpx;margin-left: 10px;">
			{{weatherNow.temp}}°C
		</view>
		<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
			{{weatherNow.text}}
		</view>
		<view class="text" style=" margin-left: 10rpx;">
			{{weatherNow.windDir}} {{weatherNow.windScale}}级
		</view>
		<view>
			<view class="text" style="margin-left: 10rpx;">
				体感温度： {{weatherNow.feelsLike }}°C
			</view>
			<view class="text" style="margin-left: 10rpx;">
				湿度： {{weatherNow.humidity }}%
			</view>
		</view>
	</view>
	<uni-grid :show-border="false" :column="6" @change="changeGrid">
		<uni-grid-item v-for="(item,index) in gridData" :index="index" @tap="nav(index)">
			<view class="grid-item-box" style="background-color: #fff;width: 60px;display: flex;
			flex-direction: column;text-align: center;">
				<uni-icons :type="item.icon" :size="30 " color="#fe0067" />
				<text class="text">{{item.title}}</text>
			</view>
		</uni-grid-item>

	</uni-grid>


	<uni-section title="卡片+列表" type="line">
				<uni-card padding="0" spacing="0">
					<template v-slot:cover>
						<view class="custom-cover">
							<image class="cover-image" mode="aspectFill" :src="cover">
							</image>
							<view class="cover-content">
								<text class="uni-subtitle uni-white">今日新闻热点</text>
							</view>
						</view>
					</template>
					<uni-list>
						<uni-list-item title="今日新闻" showArrow></uni-list-item>
						<uni-list-item title="今日新闻" showArrow></uni-list-item>
					</uni-list>
					<view slot="actions" class="card-actions no-border">
						<view class="card-actions-item" @click="actionsClick('分享')">
							<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">分享</text>
						</view>
						<view class="card-actions-item" @click="actionsClick('点赞')">
							<uni-icons type="heart" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">点赞</text>
						</view>
						<view class="card-actions-item" @click="actionsClick('评论')">
							<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">评论</text>
						</view>
					</view>
				</uni-card>
			</uni-section>


</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config';
	import {
		userStore
	} from '../../store/userStore';
	const pages = [
		'/pages/dianying/dianying',
		'/pages/jingdian/jingdian',
		'/pages/yunshi/yunshi',
		'/pages/tianqi/tianqi'
	];
	let store = userStore()
	onLoad(() => {
		getLunbo()
		getWeather()
		getPos()
	})
	let lunboList = ref([])
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/lunbo")
		console.log(res)
		lunboList.value = res.results
	}
	let searchKey = ref("")

	function searchCityBus() {
		if (searchKey.value == "") {
			uni.showToast({
				title: "请输入搜索线路名称",
				icon: "none"
			})
		} else {
			let url = `https://uri.amap.com/line?name=${searchKey.value}&city=029&callnative=0`
			window.location.href = url
		}
	}
	// 获取当前位置坐标
	function getPos() {
		console.log("getpos")
		uni.getLocation({
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				// 将定位保存到状态库
				store.savePos(res.longitude, res.latitude)
				console.log(store.currentPos)
			}
		});
	}

	function nav(index) {
		console.log("点击了详情:" + index);
		// 检查索引是否在数组范围内
		if (index >= 0 && index < pages.length) {
			// 跳转到对应的页面
			uni.navigateTo({
				url: pages[index] + "?id=" + index
			});
		} else {
			console.error("索引超出范围");
		}
	}
	let weatherNow = ref({})
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}
	let gridData = [{
			title: '热映电影',
			icon: 'videocam'
		},
		{
			title: '景点',
			icon: 'image'
		},
		{
			title: '每日运势',
			icon: 'image'
		},
		{
			title: '天气预报',
			icon: 'image'
		}
	]
</script>

<style>
	.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		height: 150px;
		width: 100%;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}

	.grid-container {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		padding: 10px;
		/* 容器内边距 */
	}

	.uni-grid {
		width: 480px;
		/* 占满容器宽度 */

	}

	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		padding-left: 15px;
		/* 项内边距 */
		box-sizing: border-box;
		/* 盒模型 */
		border: 1px solid #eee;
		/* 边框 */
		margin: 5px;
		/* 外边距 */
		border-radius: 4px;
		/* 圆角 */
		background-color: #fff;
		/* 背景色 */
	}

	.grid-item-icon {
		width: 20px;
		/* 图标宽度 */
		height: 20px;
		/* 图标高度 */
		margin-bottom: 5px;
		/* 图标与文字间距 */
	}

	.grid-item-text {
		font-size: 14px;
		/* 文字大小 */
		color: #333;
		/* 文字颜色 */
	}

	/* 适应不同屏幕 */
	@media (max-width: 768px) {
		.grid-item-box {
			padding: 12px;
			margin: 6px;
		}

		.grid-item-box img {
			width: 18px;
		}

		.text {
			font-size: 12px;
		}
	}

	/* 适应更小的屏幕 */
	@media (max-width: 480px) {
		.grid-item-box {
			padding: 10px;
			margin: 4px;
		}

		.grid-item-box img {
			width: 16px;
		}

		.text {
			font-size: 10px;
		}
	}
</style>